/*
 * @Description: 本文件为管理系统的左侧菜单列表
 * @Author: 谢涛
 * @LastEditors: 郑祥
 * @Date: 2019-04-22 19:13:58
 * @LastEditTime: 2021-06-03 16:36:27
 */

import React from "react";
import {Menu, message} from "antd";
import {Link} from "react-router-dom";
import {menuApi} from "@/services/basic";

import "./style.css";
import Dictionary from "../../services/dictionary";

const SubMenu = Menu.SubMenu;

class MySider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: this.props.activeKey || "homePage", //定义初始展示的页面为homePage组件
            // openKeys: ['sub2'],//前端自己生成的菜单
            openKeys: [], //定义默认打开第二组菜单
            menuItems: [],
            // sub: [], //第一级菜单
            rootSubmenuKeys: [],
            collapsed: "true",
        };
    }

    // 获取子菜单
    getChildMenu = (item) => {
        const children = [];
        const {mjbz, btnbz, hasChild, childrens} = item;
        if (mjbz === "1" && btnbz === "0") {
            children.push(item);
            return children;
        }
        if (mjbz === "0" && hasChild) {
            for (let child of childrens) {
                children.push(...this.getChildMenu(child));
            }
        }
        return children;
    };

    fetchSub = () => {
        //获取菜单
        menuApi.getLeftMenu().then((res) => {
            if (res.data && res.data.length !== 0) {
                //判断接受到的数组是否为空
                let newSub = res.data.slice(0); //将数组复制一份
                let rootSubmenuKeys = [];
                if (newSub.filter((item) => item.bs === true).length === 0) {
                    message.warning("该用户尚未分配菜单权限 请联系管理员");
                    return false;
                }
                //   抽出末级菜单 --- 递归
                const mjCds = [];
                for (let item in newSub) {
                    if (newSub[item] && newSub[item].bs) {
                        mjCds.push(...this.getChildMenu(newSub[item]));
                        rootSubmenuKeys.push(`${newSub[item].id}`);
                    }
                }
                sessionStorage.setItem("mjCds", JSON.stringify(mjCds));

                // const menuData = this.getMenuData(newSub);
                newSub = this.renderMenu(newSub);
                this.setState(
                    {
                        // menuItems: menuData,
                        sub: newSub,
                        openKeys: [`${res.data[0].id}`],
                        rootSubmenuKeys: rootSubmenuKeys,
                    }
                );
            } else {
                this.setState({
                    sub: [],
                });
            }
        });
    };

    componentDidMount() {
        if (1) {
            this.fetchSub(); //默认取到所有一级菜单
        }
    }

    handleClick = (e) => {
        this.setState({current: e.key});
        this.props.getSiderItem(e); //把当前点击了的菜单项信息传给父组件（Index）
    };

    onItemChange = (item) => {
        this.setState({current: item});
    };

    onOpenChange = (openKeys) => {
        //新老openKeys对比 找到当前老的状态中没有的那个key
        const latestOpenKey = openKeys.find(
            (key) => this.state.openKeys.indexOf(key) === -1
        );
        //如果这个最新打开的key 在rootSubmenuKeys中(也就是一级菜单中没有) 那么就用这个新的openkeys替换老的openkeys
        //可以理解为打开了某个二级菜单
        if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({openKeys});
        } else {
            //否则 如果latestOpenKey存在就让openKeys只剩这一个打开的latestOpenKey，若不存在就都不打开
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    };

    //渲染菜单
    renderMenu = (sub) => {
        return sub.map((item) => {
            const Icon = Dictionary.icons[item.tb];

            if (item.hasChild) {
                return (
                    <SubMenu
                        key={item.id}
                        title={
                            <span>
								<span>{item.mc}</span>
							</span>
                        }
                        icon={Icon?<Icon></Icon>:null}
                        style={{display: item.bs ? "block" : "none"}}
                    >
                        {this.renderMenu(item.childrens)}
                    </SubMenu>
                );
            } else {
                return (
                    <Menu.Item key={item.id} title={item.mc}
                               icon={Icon?<Icon></Icon>:null}
                    >
                        <Link to={item.tzdz} onClick={this.onMenuClick}>
                            {item.mc}
                        </Link>
                    </Menu.Item>
                );
            }
        });
    };

    // 将数据处理成Menu items的格式
    getMenuData = (list) => {
        return  list.map(item => {
            const Icon = Dictionary.icons[item.tb];
            const flag = item.hasChild && Array.isArray(item.childrens) && item.childrens.length > 0;
            const children = flag?this.getMenuData(item.childrens):null;
            const obj = {
                ...item,
                key: item.id,
                label: item.mc,
                title: item.mc,
                icon:Icon?<Icon></Icon>:null,
                children,
                // onClick:()=>{
                //     this.handleClick(obj)
                // }
            }
            delete obj.childrens;
            return obj;
        })
    }

    render() {
        const {sub,menuItems} = this.state; //存在且不为空时取值
        return (
            <div id="components-layout-demo-custom-trigger">
                <Menu
                    mode="inline"
                    theme="light"
                    collapsed={this.state.collapsed}
                    openKeys={this.state.openKeys} //指示哪个key是默认打开着的
                    selectedKeys={[this.state.current]} //只是哪个key是被选中着的
                    onOpenChange={this.onOpenChange} //打开的key变化时
                    onClick={this.handleClick} //点击key时
                    // items={menuItems}
                >
                    {/* 后端获取 */}
                    {sub}

                    {/* 前端自行生成 */}
                </Menu>
            </div>
        );
    }
}

export default MySider;
